<template>
	<view class="message">
		<view v-for="(item, index) of de" :key="index" class="specify" >
			<view class="page-section-spacing">
				<swiper class="swiper" 
				indicator-dots
				interval="3000"
				circular="ture"
				autoplay>
					<swiper-item>
						<view class="swiper-item-img">
							<image :src="item.image1" mode="aspectFill"></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item-img">
							<image :src="item.image2"  mode="aspectFill"></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item-img">
							<image :src="item.image3" mode="aspectFill"></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item-img">
							<image :src="item.image4"  mode="aspectFill"></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item-img">
							<image :src="item.image5" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="content1" >
				<view class="content-head">
					<view class="head-img">
						<image :src="item.image6" mode="aspectFill"></image>
					</view>
					<view class="name">{{item.name}}</view>
					<view class="follow">{{item.like}}</view>
				</view>
				<view class="content-txt">
					<h5>{{item.title}}</h5>
					<h6>{{item.txt}}</h6>
					<p>{{item.text1}}</p>
					<p>{{item.text2}}</p>
					<p>{{item.text3}}</p>
					<p>{{item.text4}}</p>	
				</view>
				
				<view  class="review">
					<view v-for="(item, index) of review" :key="index" class="review-item">
						<text class="title"> {{ item.title }} </text>
						<view class="text"> {{ item.text }} </view>
					</view>	
					<navigator url="../comments/comments"  class="ping-lun">
						<view class="ping">查看全部367条评论</view>	
						<view class="ping-lun-img">
							<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/483dca00-3b55-11eb-bc56-c9cea619f663.png" mode="aspectFill"></image>
						</view>
					</navigator>
									
				</view>
				
				<view class="footer">
					<navigator url="../comments/comments"  class="news">
						<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/47595710-3b4d-11eb-b680-7980c8a877b8.png" mode="aspectFill"></image>
						<text>234</text>
					</navigator>
					<view class="share">
						<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/61bc19d0-3b4d-11eb-b680-7980c8a877b8.png" mode="aspectFill"></image>
						<text>990</text>
					</view>
					<view class="star">
						<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/8f34e0e0-3b4d-11eb-b997-9918a5dda011.png" mode="aspectFill"></image>
						<text>897</text>
					</view>
					<view class="heart">
						<image src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/1695d1d0-3b4d-11eb-b680-7980c8a877b8.png" mode=""></image>
						<text>13456</text>
					</view>
				</view>
				
				<view class="time">{{item.time}}</view>
					
				<view class="suggestion">相关推荐</view>
				<view class="information">
					<waterfallsFlow :list="list">
						<!--  #ifdef  MP-WEIXIN -->
						<view v-for="(item, index) of list" :key="index" slot="slot{{index}}">
							<navigator :url="'../message/message?id='+item.id">
								<view class="cnt">
									<view class="title">{{ item.title }}</view>
									<view class="text">{{ item.text }}</view>
									<view class="bottom">
										<view class="bottom-img">
											<image :src="item.image1_url" mode="aspectFill"></image>
										</view>
										<view class="bottom-msg">{{ item.msg }}</view>
										<view class="bottom-icon" @click="addNum(item.id)">
											<image :src="item.icon_url" mode="aspectFill"></image>
										</view>
										<view class="bottom-num">{{ item.number }}</view>
									</view>
					
								</view>
							</navigator>
					
						</view>
						<!--  #endif -->
					
						<!-- #ifndef  MP-WEIXIN -->
						<view v-slot:default="item">
							<view class="cnt">
								<view class="title">{{ item.title }}</view>
								<view class="text">{{ item.text }}</view>
					
							</view>
						</view>
						<!-- #endif -->
					</waterfallsFlow>
					
				</view>
				
			</view>
		</view>
	</view>
	
	
</template>`	

<script>
	import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
		
	export default{
		name:"message",
		components: {
			waterfallsFlow
		},
		data(){
			return{
				detail:[
					{
						id:1,
						image1:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/9ca8a270-3b4d-11eb-97b7-0dc4655d6e68.jpg",
						image2:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/a0740250-3b4d-11eb-b680-7980c8a877b8.jpg",
						image3:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/a3cb6ab0-3b4d-11eb-b997-9918a5dda011.jpg",
						image4:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/a8fff780-3b4d-11eb-bd01-97bc1429a9ff.jpg",
						image5:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/acc1e180-3b4d-11eb-8a36-ebb87efcf8c0.jpg",
						image6:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/969eeb50-3b4d-11eb-bf0a-894cbc80c40a.png",
						name:"会飞的柴猪猪",
						like:"关注",
						title:" 柴犬minapple和它的玩偶🐶 ",
						txt:"#汪星人撸狗#",
						text1:"来自日本的一只柴柴，家里有许多玩偶，",
						text1:"但是却独爱这一只,我想是因为和它本狗长得像吧哈哈。",
						text1:"连表情和动作都像是复刻的，神奇宠物成精了",
						text1:"宠物技能大赛柴犬可爱萌犬联盟来自狗的凝视。",
						time:"2019-12-21"
						
					},
					{
						id:3,
						image1:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/b94b9130-3b4d-11eb-8ff1-d5dcf8779628.jpg",
						image2:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/be377c40-3b4d-11eb-b680-7980c8a877b8.jpg",
						image3:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/c1c4e8c0-3b4d-11eb-97b7-0dc4655d6e68.jpg",
						image4:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/c6d1c950-3b4d-11eb-8a36-ebb87efcf8c0.jpg",
						image5:"https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/cbd61e60-3b4d-11eb-bc56-c9cea619f663.jpg",
						image6:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1762065740,1806700128&fm=11&gp=0.jpg",
						name:"歪歪嘻嘻嘻",
						like:"关注",
						title:" 这家巧克力酸奶绝了! ! !",
						txt:"-直听说这家很好吃，后悔为啥现在才来! 奎星楼街的TukTuk印度手工酸奶" ,
						text1:"门面真的超不起眼，有一个小桌子可以坐着吃，也能带回家。",
						text1:"他家的酸奶口味并不是简单的加topping,像酒酿、巧克力这些味道都是直接加入酸奶里面融合发酵，所以结合的很好",
						text1:"酸奶的质感真的太好了,醇厚顺滑,饱口明亮,还能拉丝!甜度也刚刚好,凉丝丝地吃---碗很舒服~",
						text1:"下次来要把其他口味都all。"
					},
				],
				
				review:[
					{
						id:1,
						title:"Alice👑 :",
						text:"开始以为三只都是真的呢～"
					},
					{
						id:2,
						title:"阿根廷没有眼泪💧:",
						text:"第一张我以为是相亲相爱的一家三口呢"
					},
					{
						id:3,
						title:"佳佳佳佳:",
						text:"这个玩偶🧸哪里买的  求求求 好喜欢啊"
					},
					{
						id:4,
						title:"Alice👑 :",
						text:"开始以为三只都是真的呢～"
					}
				],
				
				list: [
					{
						id: 1,
						image_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599475741266&di=e36d6c01c93320e2ba1504d8357248f4&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F30%2F29%2F01300000201438121627296084016.jpg",
						title: "可爱的小猫咪呀",
						type: 0,
						image1_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607570927986&di=896ffdf8d544c4c6630af927f1fdb470&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201902%2F17%2F20190217231515_ixMhS.thumb.700_0.jpeg",
						msg: "柴犬犬",
						icon_url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/fe031420-3b4c-11eb-bd01-97bc1429a9ff.png",
						number: "798",
						text: "小小的猫咪，甚是呆萌，呆萌呆萌呆萌呆萌呆萌呆萌呆萌呆萌",
					},
					{
						id: 2,
						image_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599475934834&di=7a37b8d628252c4aced6ed0decba9442&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F43%2F74%2F01300000164151121808741085971.jpg",
						title: "迪士尼动画",
						type: 1,
						image1_url: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3617442206,1150108905&fm=26&gp=0.jpg",
						icon_url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/fe031420-3b4c-11eb-bd01-97bc1429a9ff.png",
						number: "46",
						text: "迪士尼动画之……",
					},
					{
						id: 3,
						image_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599476083909&di=a5debff35edec5de105bc105d6fdbce3&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F77%2F77%2F01300000336597125202779973172.jpg",
						title: "火箭",
						type: 0,
						image1_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607580766183&di=6ffc9e01b891e77a991b311f477d2e76&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201708%2F02%2F20170802072206_v5FEN.jpeg",
						msg: "圣诞猫",
						icon_url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/fe031420-3b4c-11eb-bd01-97bc1429a9ff.png",
						number: "12",
						text: "火箭升空瞬间，宏伟壮观啊",
					},
					{
						id: 4,
						image_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599476129760&di=7a3db0b14f6a74240bbfa7922ba22f45&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F82%2F55%2F01300000349330124003555691086.jpg",
						title: "华佗",
						type: 4,
						image1_url: "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607580831046&di=91e37c2600a86e4e5f3a082464e6a031&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201505%2F30%2F20150530141552_xZKFz.thumb.700_0.jpeg",
						msg: "柴小猪",
						icon_url: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-gxvmswvqrdsb9ee2df/fe031420-3b4c-11eb-bd01-97bc1429a9ff.png",
						number: "430",
						text: "华佗人物画像 中国画 线条画 毛笔画 彩色画",
					},
				],
				de : []
			
			}
		},
		onLoad(options) {
			console.log(options.id);
			console.log(typeof options.id);
			console.log(typeof this.detail[0].id);
			for(let item in this.detail) {
				// console.log(item);
				if(this.detail[item].id == options.id) {
					this.de.push(this.detail[item]);
					// console.log(this.de)
					break;
				}
			}
		},
		
	}
</script>

<style lang="scss">
	.swiper{
		height: 600rpx;
		margin-top: 10px;
	}
	.swiper-item-img image{
		width: 100%;
		height: 600rpx;
	}
	.content-head{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 14px;
	}
	
	.head-img image{
		width: 50px;
		height: 50px;
		border-radius: 50px;
		margin:0 14px;
	}
	.name{
		font-size: 16px;
	}
	.follow{
		color: #FF6138;
		border: 1px solid #FF6138;
		border-radius: 20px;
		font-size: 16px;
		width: 60px;
		height: 30px;
		text-align: center;
		line-height: 30px;
		margin-left: 160px;
	}
	.content-txt{
		font-size: 16px;
		color: #AEAEAE;
		margin:10px 10px 20px;
	}
	.review{
		background: #DEDEDE;
		border-radius: 10px;
		margin: 10px;
	}
	.review-item{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding:0 10px;
		font-size: 14px;
	}
	.ping-lun{
		display: flex;
		justify-content: flex-start;
		color:#FF6138;
	}
	.ping{
		padding-left:10px;
		font-size: 14px;
	}
	.ping-lun-img image{
		width: 20px;
		height: 20px;
	}
	.time{
		font-size: 12px;
		color: #C0C0C0;
		margin-left: 20px;
	}
	.suggestion{
		font-size: 16px;
		color: #C0C0C0;
		margin:20px 10px 0 20px;
	}
	.information {
		padding: 10px;
		z-index: 998;
		.cnt {
			padding: 10px;
	
			.title {
				font-size: 16px;
			}
	
			.text {
				font-size: 14px;
				margin-top: 5px;
			}
		}
	}
	.bottom {
		height: 30px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 12px;
		margin-top: 10px;
	}
	
	
	.bottom-img image {
		width: 30px;
		height: 30px;
		border-radius: 40px;
	}
	
	.bottom-icon image {
		width: 20px;
		height: 20px;
		padding-left: 50px;
		padding-right: 10px;
	}
	
	.content1{
		position: relative;
	}
	.footer{
		border-top: 1px solid #DEDEDE;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		width: 750rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		z-index: 999;
	}
	.footer image{
		width: 20px;
		height: 20px;
	}
	.news,
	.share,
	.star,
	.heart{
		margin:4px 16px;
	}
	.news text,
	.share text,
	.star text,
	.heart text{
		padding-left:4px;
		font-size: 14px;
	}
</style>
